$(function(){
    // 需求一：自定义校验规则-->将校验规则的属性名写在对应input框的lay-verify属性中
      layui.form.verify({
        // 用户昵称正则校验
        nickname:[
            /^[\S]{1,10}$/,
            '用户昵称为1-10位非空字符'
        ]
    })
    initUserInfo()
    // 需求二：进入user_info页面时，获取后台数据渲染至用户信息收集表单-->封装函数
    function initUserInfo(){
        axios({
            method:'GET',
            url:'/my/userinfo',
        }).then(({data:res})=>{
            console.log(res)
            if(res.status!=0){
                return layui.layer.msg(res.message)
            }
            // layui表单赋值步骤：
            //1.表单需要有class="layui-form"这个类名
            //2.给需要赋值的表单添加 lay-filter="表单名"
            //3.通过form.val('表单名', 赋值对象)  注意赋值对象的属性名需要和表单项的name属性一致
            layui.form.val('formUserInfo',res.data)
        })
    }
    // 需求三：重置功能
    $('form').on('reset',function(e){
        e.preventDefault()
        initUserInfo()
    })

    // 需求四：修改信息
    $('form').on('submit',function(e){
        e.preventDefault()
        // 发送请求，将修改后的信息渲染至页面对应模块
        //注意：开发文档需要提交id数据，而我们提交的表单整体里面是没有name属性为id的表单元素
        // 解决方案：给表单新增一个name为id的元素，隐藏起来(hidden/display：none)
        axios({
            method:'POST',
            url:'/my/userinfo',
            data:$(this).serialize()
        }).then(({data:res})=>{
             // 将修改后的信息渲染至页面对应模块
             console.log(res)
            //  这里直接调用getUserInfo()方法不成功，该方法的window对象是index.html页面的
             window.parent.getUserInfo()
        })
    })
})